<template>
  <li :class="['listItem', 'flex-row', currentUserWxid && item.wxid==currentUserWxid && 'active', item.always_top && 'alwayTopMessage']"
    @click="click(item)">
    <slot name="checkbox"></slot>
    <img :src="item.src||item.avatar || defaultAvatar" alt="" class="listItemAvatar">
    <div class="listItemInfo flex-column">
      <div class="listItemTopInfo flex-row" v-if="item.name||item.friendnick||item.nick||item.nickname">
          <div :class="['listItemName', 'textEllipsis',
            showGender && item.gender == 1 ? 'male' : item.gender == 0 ? 'female' : '' ]">
            {{item.name||item.friendnick||item.nick||item.nickname}}
            <span class="layui-badge layui-bg-blue" v-if="showBadge&&item.isVip&&item.type=='user'">VIP</span>
          </div>
          <span class="layui-badge" v-if="showBadge&&item.unreadMessageCount&&!item.decline">{{item.unreadMessageCount > 999 ? '999+' : item.unreadMessageCount }}</span>
          <span class="layui-badge-dot" v-if="showBadge&&item.unreadMessageCount&&item.decline"></span>
      </div>
      <div class="listItemBottomInfo flex-row fontGrey">
        <div class="textEllipsis" v-if="showLastMessage">{{item.lastMessage}}</div>
        <slot name="bottomInfo"></slot>
      </div>
    </div>
    <slot name="attachInfo"></slot>
  </li>
</template>
<script>

export default {
  name: 'userListItem',
  props: ['item', 'showLastMessage', 'showBadge', 'currentUserWxid', 'showGender'],
  methods: {
    click(item){
      this.$emit('click', item);
    }
  }
}
</script>
